@extends('layouts.application')

@section('content')
    <div class="admin-content">
        <div class="admin-content-body">
            <div class="am-cf am-padding">
                <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">首页</strong> /
                    <small>一些常用模块</small>
                </div>
            </div>

            <ul class="am-avg-sm-1 am-avg-md-4 am-margin am-padding am-text-center admin-content-list ">
                <li><a href="#" class="am-text-success"><span
                                class="am-icon-btn am-icon-file-text"></span><br/>新增页面<br/>2300</a></li>
                <li><a href="#" class="am-text-warning"><span
                                class="am-icon-btn am-icon-briefcase"></span><br/>成交订单<br/>308</a></li>
                <li><a href="#" class="am-text-danger"><span class="am-icon-btn am-icon-recycle"></span><br/>昨日访问<br/>80082</a>
                </li>
                <li><a href="#" class="am-text-secondary"><span
                                class="am-icon-btn am-icon-user-md"></span><br/>在线用户<br/>3000</a></li>
            </ul>

            <div class="am-g">
                <div class="am-u-sm-4">
                    <div id="sex_total" style="width: 400px;height:400px;"></div>
                </div>

                <div class="am-u-sm-8">
                    <div id="province_total" style="width: 600px;height:400px;"></div>
                </div>
            </div>

        </div>

        <footer class="admin-content-footer">
            <hr>
            <p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
        </footer>
    </div>

@endsection

@section('js')
    <script src="/vendor/echarts/echarts.min.js"></script>
    <script src="/vendor/echarts/china.js"></script>
    {{--主题--}}
    <script src="/vendor/echarts/macarons.js"></script>
    <script>
        $(function () {
            ws = new WebSocket("ws://127.0.0.1:7272");
            ws.onmessage = (e) => {
                var data = JSON.parse(e.data);
                var type = data.type || '';

                // if (type == 'init') {
                //     $.post('/api/admin/bind', {client_id: data.client_id});
                // }
                // if (data.type) {
                //     return;
                // }
                switch (type) {
                    case 'init':
                        $.post('/api/admin/bind', {client_id: data.client_id});
                        break;
                    default :
                        console.log(data);
                }

                var option = {
                    series: [{
                        data: data,
                    }]
                };
                sex_total.setOption(option);
            };

            /**
             * 会员性别比列统计
             */
                // 基于准备好的dom，初始化echarts实例
            var sex_total = echarts.init(document.getElementById('sex_total'), 'macarons');

            sex_total.showLoading(); //加载loading 动画
            // 指定图表的配置项和数据
            $.get('{{route('sex_total')}}').done(function (data) {

                sex_total.hideLoading(); //加载完后隐藏
                var option = {
                    title: {
                        text: '会员男女比例统计',
                        subtext: '真实数据',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['男', '女']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: data,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                sex_total.setOption(option);
            });

            /**
             * 会员省份比列统计
             */
                // 基于准备好的dom，初始化echarts实例
            var province_total = echarts.init(document.getElementById('province_total'), 'macarons');

            province_total.showLoading(); //加载loading 动画
            // 指定图表的配置项和数据
            $.get('{{route('province_total')}}').done(function (data) {

                province_total.hideLoading(); //加载完后隐藏
                var option = {
                    title: {
                        text: '商城会员省份及人数统计',
                        subtext: '真实数据',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['省份', '人数']
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            dataView: {readOnly: false},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [
                        {
                            name: '人数',
                            type: 'map',
                            mapType: 'china',
                            roam: false,
                            label: {
                                normal: {
                                    show: true
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data: data
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                province_total.setOption(option);
            });


        })
    </script>
@endsection
